<template>
  <div class="container">
    <!-- 标签 -->
    <el-row :gutter="20">
      <el-col :span="6">【题型】：{{ questionDetail.questionType }}题</el-col>
      <el-col :span="6">【编号】：{{ questionDetail.id }}</el-col>
      <el-col :span="6">【难度】：{{ questionDetail.difficulty }}</el-col>
      <el-col :span="6">【标签】：{{ questionDetail.tags }}</el-col>
      <el-col :span="6">【学科】：{{ questionDetail.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ questionDetail.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ questionDetail.direction }}</el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 题干 -->
    <div>【题干】：</div>
    <div class="question-explain">
      <div style="color:blue" v-html="questionDetail.question"></div>
      <div v-if="questionDetail.questionType !== oneAnswer[2]">
        {{ questionDetail.questionType }}题 选项：（以下选中的选项为正确答案）
      </div>
      <!-- 单选 -->
      <el-radio-group
        v-model="radio"
        v-if="questionDetail.questionType === oneAnswer[0]"
        @change="radio = 1"
      >
        <el-radio
          v-for="(item, index) in questionDetail.options"
          :label="item.isRight"
          :key="index"
          class="radio-item"
          >{{ item.title }}</el-radio
        >
      </el-radio-group>

      <!-- 多选 -->
      <el-checkbox-group
        v-model="checkList"
        @change="checkList = [1]"
        v-else-if="questionDetail.questionType === oneAnswer[1]"
      >
        <el-checkbox
          v-for="(item, index) in questionDetail.options"
          :label="item.isRight"
          :key="index"
          class="radio-item"
          >{{ item.title }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <el-divider></el-divider>
    <!-- 参考答案视频 -->
    <el-row :gutter="20">
      <el-col :span="24"
        >【参考答案】：<el-button
          type="danger"
          size="small"
          @click="isVideoShow = true"
          >视频答案预览</el-button
        ></el-col
      >
      <video
        class="answer-video"
        :src="questionDetail.videoURL"
        controls="controls"
        v-show="isVideoShow"
        autoplay
      ></video>
    </el-row>
    <el-divider></el-divider>
    <!-- 答案解析 -->
    <el-row :gutter="20">
      <el-col :span="24" class="answer-link"
        >【答案解析】：<span v-html="questionDetail.answer"></span
      ></el-col>
    </el-row>
    <el-divider></el-divider>
    <!-- 题目备注 -->
    <el-row :gutter="20">
      <el-col :span="24">【题目备注】：{{ questionDetail.remarks }}</el-col>
    </el-row>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
import { detail as questionDetail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  components: {},
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      questionDetail: {},
      isVideoShow: false,
      radio: 1,
      checkList: [1],
      oneAnswer: ['单选', '多选', '简答']
    }
  },
  created() {
    this.getQuestionById()
  },
  mounted() {},
  methods: {
    // 获取题目详情
    async getQuestionById() {
      try {
        const { data } = await questionDetail({ id: this.id })
        this.questionDetail = data
        // 题型
        const i = this.questionDetail.questionType - 1
        this.questionDetail.questionType = questionType[i].label
        // 难度
        const j = this.questionDetail.difficulty - 1
        this.questionDetail.difficulty = difficulty[j].label
      } catch (err) {
        this.$message.error('获取文章详情失败')
      }
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.el-col {
  padding: 10px 0;
}
/deep/.answer-link p {
  display: inline;
}
.el-divider {
  margin: 7px 0;
}
.question-explain {
  margin-left: 10px;
}
.answer-video {
  margin-left: 15px;
  width: 400px;
  height: 300px;
}
.radio-item {
  padding: 5px 0;
  width: 100%;
}
</style>
